<script setup>
import { ref } from 'vue'
import ApplicationWindow from '@/components/ApplicationWindow.vue'
import SlideList from '@/components/SlideList.vue'

import GameSwipe from './components/GameSwipe.vue'
import TheTop from '@/components/TheTop.vue'
import { useToggle } from '@/use/useToggle'
const [isSearchViewShown, toggleSearchView] = useToggle(false)
const data = ref({})
let list = [1, 2, 3, 4]
let slideArr = ['娱乐', '社交', '图书', '工具', '体育']
const windowURL = ref(
  'https://img1.baidu.com/it/u=2979077677,2364176659&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
)
// 获取整个窗口的宽度
var windowWidth = window.outerWidth

let swipeWidth = windowWidth - 60
const toUrl = () => {
  window.location = 'https://test.milaasia.com/#/topUp'
}
// let bgColor = '#608D5D'
</script>
<template>
  <div class="home-page">
    <div v-show="!isSearchViewShown" class="person">
      <TheTop :recomments="data.searchRecomments" :itemTitil="$t('personage')" />
      <van-button type="primary" style="margin-top: 40px" class="down-btn" @click="toUrl()">{{
        $t('topUp')
      }}</van-button>

      <!-- <SlideList style="margin-top: 8px" :slideArr="slideArr"> </SlideList>

      <van-swipe class="my-swipe" indicator-color="white" :width="swipeWidth">
        <van-swipe-item v-for="(item, index) in list" :key="index" class="my-swipe-item">
          <ApplicationWindow
            style="margin-top: 10px; margin-right: 10px"
            :windowURL="windowURL"
            :showTitil="true"
          ></ApplicationWindow
        ></van-swipe-item>
      </van-swipe>

      <GameSwipe style="margin-top: 12px" itemTitle="时下畅销游戏"></GameSwipe> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  background: var(--op-gray-bg-color);

  // padding: var(--vt-c-common-window-padding);
  padding-bottom: 70px;
  background: #fff;
  // display: flex;
  // justify-content: center;
}
.down-btn {
  font-weight: bold;
  background: rgb(245, 245, 245);
  border-color: rgb(245, 245, 245);
  color: #0d7ffe !important;
  padding: 10px 110px !important;
  font-size: 14px;
  margin-top: 6px;
}
</style>
